<!--
*用户新增页面
* -->
<!DOCTYPE html>
<html>
<head>
    <title>ManaGement PlatForm</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="_csrf" content="2a049f84-561c-44bf-ae25-f24fbf78b313">
    <meta name="_csrf_header" content="X-CSRF-TOKEN">

    <script src="/wedding_admin/js/common.js"></script>
    <script src="/wedding_admin/js/jquery.min.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.all.min.js"></script>
    <script src="/wedding_admin/js/jszip.min.js"></script>
    <script src="/wedding_admin/js/um/respond.min.js"></script>
    <script src="/wedding_admin/js/um/es5-shim.min.js"></script>

    <script src="/wedding_admin/js/kendo/kendo.culture.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.messages.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.hap.js?v=20180330"></script>
    <script src="/wedding_admin/js/um/moment.min.js"></script>
    <script src="/wedding_admin/js/um/daterangepicker.js"></script>
    <script src="/wedding_admin/js/layui/lay/dest/layui.all.js"></script>

    <script src="/wedding_admin/js/vue_table/vue.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue-validator.min.js"></script>

    <script src="/wedding_admin/js/treegrid/tree.table.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.extension.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.min.js"></script>
    <script src="/wedding_admin/js/ztree/jquery.ztree.all.min.js"></script>

    <link href="/wedding_admin/statics/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/statics/css/simple-line-icons.min.css" rel="stylesheet" type="text/css">

    <link href="/wedding_admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.hap.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/daterangepicker.css" rel="stylesheet">


</head>
<style type="text/css">
    #retryWindow {
        margin-top: 10px;
    }

    #retryWindow label {
        line-height: 30px;
        text-align: right;
        box-sizing: border-box;
    }

    #retryWindow div {
        box-sizing: border-box;
    }

    .col-sm-10 {
        width: 40%;
    }

    /*input -*/
    .form-control {
        display: inline;
        width: 90%;
    }
</style>


<body>

<script type="text/javascript">

</script>
<div id="rrapp" v-cloak>
    <div id="content-container">
        <div id="page-content">
            <form class="form-horizontal">
                <input type="hidden" id="instId" name="instId">
                <div id="tab" class="col-sm-12">
                    <ul class="nav nav-tabs" id="mytab">
                        <li class="active"><a href="#statusInfo" data-toggle="tab">添加用户信息</a></li>
                    </ul>
                    <div id="tabContent" class="tab-content">
                        <div id="statusInfo" class="tab-pane fade in active" style="margin-top: 10px;">

                            <div class="panel panel-default">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <div class="form-group"></div>

                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">用户名称</div>
                                            <div class="col-sm-10">

                                                <input type="text" class="form-control"
                                                       v-model="user.lastName" placeholder="用户名称"/>
                                                <em style="color: red;">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">用户账号</div>
                                            <div class="col-sm-10">

                                                <input type="text" class="form-control"
                                                       v-model="user.username" placeholder="用户账号"/>
                                                <em style="color: red;">*</em>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">用户密码</div>
                                            <div class="col-sm-10">

                                                <input type="text" class="form-control"
                                                       v-model="user.password" placeholder="用户密码"/>
                                                <em style="color: red;">*</em>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">用户编号</div>
                                            <div class="col-sm-10">

                                                <input type="text" class="form-control"
                                                       v-model="user.workCode" placeholder="用户编号"/>
                                                <em style="color: red;">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">用户邮箱</div>
                                            <div class="col-sm-10">

                                                <input type="text" class="form-control"
                                                       v-model="user.email" placeholder="用户邮箱"/>

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">手机号</div>
                                            <div class="col-sm-10">

                                                <input type="text" class="form-control"
                                                       v-model="user.mobile" placeholder="手机号"/>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">性别</div>
                                            <label class="radio-inline">
                                                <input type="radio" name="sex" value="0" v-model="user.sex"/> 男
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" name="sex" value="1" v-model="user.sex"/> 女
                                            </label>
                                            <em style="color: red;">*</em>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">所属部门</div>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" style="cursor:pointer;"
                                                       @click="menuTree" v-model="user.deptName" readonly="readonly"
                                                       placeholder="所属部门"/>
                                                <em style="color: red;">*</em>
                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <div class="col-sm-2 control-label">角色名称</div>
                                            <div class="col-sm-10">
                                                <label v-for="role in roleList" class="checkbox-inline">
                                                    <input type="checkbox" :value="role.roleId"
                                                           v-model="user.roleIdList">{{role.roleName}}
                                                </label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-4 control-label"></div>
                                            <input type="button" class="btn btn-success" @click="saveOrUpdate"
                                                   value="确定" style="width: 80px"/>

                                        </div>
                                    </div>

                                </form>

                            </div>
                        </div>

                    </div>
                </div>

                <div id="menuLayer" style="display: none;padding:10px;">
                    <ul id="menuTree" class="ztree"></ul>
                </div>
            </form>
        </div>
    </div>
    <!-- 选择部门 -->


</div>

<script>
    //获取角色信息
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "deptId",
                pIdKey: "parentId",
                rootPId: -1
            },
            key: {
                url: "nourl"
            },
            deptList: {}
        }
    };
    var ztree;
    var vm = new Vue({
        el: '#rrapp',
        data: {

            roleList: {},
            user: {
                parentId: 0,
                status: 1,
                deptId: null,
                deptName: null,
                roleIdList: []
            }

        },
        mounted() {
            //初始化执行方法
            //查询角色
            this.getRoleList()
            //查询部门
            this.getDept()

        },
        methods: {

            getDept: function () {
                debugger;

                $.ajax({
                    type: "POST",
                    url: "/wedding_admin/sys/sysdept/select",
                    contentType: "application/json",
                    success: function (r) {

                        //alert(JSON.stringify(r.deptList)+"-1121"+JSON.stringify(vm.user))

                        ztree = $.fn.zTree.init($("#menuTree"), setting, r.deptList);
                        var node = ztree.getNodeByParam("deptId", vm.user.parentId);
                        if (node != null) {
                            ztree.selectNode(node);

                            vm.user.deptName = node.name;
                        }
                    }
                });

            },
            getRoleList: function () {
                $.get("/wedding_admin/sys/sysrole/select", function (r) {
                    vm.roleList = r.roleList;

                });
            },
            saveOrUpdate: function () {
                debugger

                if (vm.validator()) {
                    return;
                }
                var url = "/wedding_admin/sys/sysuser/save";
                $.ajax({
                    type: "POST",
                    url: url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.user),
                    success: function (r) {
                        if (r.code === 0) {
                            alert('操作成功');

                            jQuery("#menuLayer").hide();//隐藏

                            var index = parent.layer.getFrameIndex(window.name) //获取窗口索引值
                            parent.location.reload();//刷新父类页面
                            window.parent.$("#editWin").data("kendoWindow").close();

                            // parent.layer.close(index); //关闭窗口


                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
            menuTree: function () {

                layer.open({
                    type: 1,
                    offset: '50px',
                    skin: 'layui-layer-molv',
                    title: "选择菜单",
                    area: ['300px', '450px'],
                    shade: 0,
                    shadeClose: false,
                    content: jQuery("#menuLayer"),
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        var node = ztree.getSelectedNodes();
                        //选择上级菜单
                        vm.user.deptId = node[0].deptId;
                        vm.user.deptName = node[0].name;

                        layer.close(index);
                        jQuery("#menuLayer").hide();//隐藏
                    },btn2: function (index) {
                        jQuery("#menuLayer").hide();//隐藏
                    },
                    // 右上角关闭按钮触发的回调：默认会自动触发关闭。如果不想关闭，return false即可
                    cancel: function(index, layero){
                        jQuery("#menuLayer").hide();//隐藏
                    },
                });
            },

            validator: function () {
                if (isBlank(vm.user.lastName)) {
                    alert("用户名称不能为空");
                    return true;
                }
                if (isBlank(vm.user.username)) {
                    alert("用户账号不能为空");
                    return true;
                }
                if (isBlank(vm.user.password)) {
                    alert("用户密码不能为空");
                    return true;
                }
                if (isBlank(vm.user.deptName)) {
                    alert("所属部门不能为空");
                    return true;
                }

                if (isBlank(vm.user.workCode)) {
                    alert("用户编号不能为空");
                    return true;
                }


            }
        }
    });


</script>
</body>
</html>
